<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            display: flex;
        }

        #box>div {
            width: 430px;
            height: 430px;
            border: 2px solid;
        }

        #box>div:last-child {
            background-image: url('../img/imgA_l.jpg');
            background-repeat: no-repeat;
            background-size: 860px 860px;
        }

        .mask {
            width: 215px;
            height: 215px;
            background-color: rgba(0, 255, 0, .3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .middle {
            position: relative;
        }

        .big {
            display: none;
        }
    </style>
</head>

<body>

    <div id="box">
        <div class="middle">
            <img src="./img/imgA_m.jpg" alt="" class="middleImg">
            <div class="mask"></div>
        </div>
        <div class="big"></div>
    </div>

    <div class="small">
        <img src="./img/imgA_s.jpg" alt="" data-id="0">
        <img src="./img/imgB_s.jpg" alt="" data-id="1">
        <img src="./img/imgC_s.jpg" alt="" data-id="2">
    </div>


    <script>
        let small = document.getElementsByClassName('small')[0];
        let middleImg = document.getElementsByClassName('middleImg')[0];
        let big = document.getElementsByClassName('big')[0];
        let middle = document.getElementsByClassName('middle')[0];
        let mask = document.getElementsByClassName('mask')[0];

        let imgM = ['imgA_m.jpg', 'imgB_m.jpg', 'imgC_m.jpg'];
        let imgL = ['imgA_l.jpg', 'imgB_l.jpg', 'imgC_l.jpg'];


        small.addEventListener('mouseover', function (event) {
            if (event.target.nodeName == 'IMG') {
                let index = event.target.dataset.id;
                console.dir(event.target);
                middleImg.src = `./img/${imgM[index]}`
                big.style.backgroundImage = `url(./img/${imgL[index]})`
            }
        })

        middle.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
            middle.addEventListener('mousemove', function (event) {

                //获取鼠标坐标
                let x = event.clientX - mask.offsetWidth / 2 - middle.offsetLeft;
                let y = event.clientY - mask.offsetHeight / 2 - middle.offsetTop;
                x = x <= 0 ? 0 : x;
                y = y <= 0 ? 0 : y;

                let maxX = middle.clientWidth - mask.offsetWidth;
                let maxY = middle.clientHeight - mask.offsetHeight;
                if (x > maxX) {
                    x = maxX;
                }
                if (y > maxY) {
                    y = maxY;
                }
                mask.style.left = x + 'px';
                mask.style.top = y + 'px';
                big.style.backgroundPosition = `${-x * (860 / 430)}px ${-y * (860 / 430)}px`
                
            });

        })

        middle.addEventListener('mouseout', function (event) {
            mask.style.display = 'none';
            big.style.display = 'none';
        })






    </script>

</body>

</html>